<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{title}}</block>
			<block slot="right">
				<text class="lg text-gray cuIcon-more margin-right" @click="showMore" style="font-size: 24px;"></text>
				<view class="dropdown" :style="[{top:CustomBar + 'px'}]" v-if="show">
					<view class="cu-item text-black padding-sm" @click="goJuBao">举报</view>
					<view class="cu-item text-black padding-sm" @click="addBlackUser">拉黑</view>
				</view>
			</block>
		</cu-custom>
		<view class="tips" :style="[{top:CustomBar + 'px'}]">
			<text>如若在使用平台过程中，发现有违规者请立即举报，举报得现金 </text> 
			<text @click="goNavto" class="text-bold">防骗指南</text> 
		</view>
		<view v-if="showGuanzhu" class="padding-lr bg-white margin border-radius-custom guanzhu" :style="[{top:(CustomBar+16) + 'px'}]">
			<view class="flex flex-direction padding-tb">
				<text class="text-black text-bold">是否关注对方？</text>
				<text class="text-gray text-sm margin-sm-t">关注后可在“我的关注”快速找到</text>
			</view>
			<view class="flex align-center">
				<button class="cu-btn bg-btn-pick color-100 margin-tb-sm sm round margin-right" @click="FllowUser">关注</button>
				<text class="cuIcon-close" @click="closeFllow"></text>
			</view>
		</view>
		<view class="cu-chat main-chat">
			
			<view v-for="(item,index) in chatList">
				<view class="system-wrap" v-if="showMsgType(item)">
					<view class="cu-info">
						{{item.text}}
					</view>
				</view>
				
				<view class="cu-item self" v-if="username == item.from_id && !showMsgType(item)">
					<view class="main">
						<view class="content bg-pink shadow" v-if="(item.msg_type == 'image')">
							<image :src="item.image" class="radius" mode="widthFix" @click="openimage(item.msg_id)"></image>
						</view>
						<view class="content bg-pink shadow" v-else  v-html="renderTextMessage(item)" >
							<!-- <text>{{item.text}}</text> -->
						</view>
					</view>
					<view class="cu-avatar radius" :style="[{background: 'url('+item.avatar+')'}]" @click="clickUser(item.from_id)"></view>
					<view class="date">{{item.time}}</view>
				</view>
				<view class="cu-item" v-else-if="username !== item.from_id && !showMsgType(item)">
					<view class="cu-avatar radius" :style="[{background: 'url('+item.avatar+')'}]" @click="clickUser(item.from_id)"></view>
					<view class="main">
						<view class="content shadow" v-if="(item.msg_type == 'image')">
							<image :src="item.image" class="radius" mode="widthFix" @click="openimage(item.msg_id)"></image>
						</view>
						<view class="content shadow" v-else v-html="renderTextMessage(item)" >
							<!-- <text>{{item.text}}</text> -->
						</view>
					</view>
					<view class="date ">{{item.time}}</view>
				</view>
			</view>
			
		</view>
		<view class="phone-wrap" :style="[{bottom:(InputBottom + 60)+'px'}]" @click="sendPhone">
			<image src="../../static/message/phone.png" class="phone"></image>
			<text class="text-gray phone-size">交换</text>
		</view>
		<view class="cu-bar foot input" :style="[{bottom:InputBottom+'px'}]">
			<!-- <view class="action">
				<text class="cuIcon-sound text-grey"></text>
			</view> -->
			<input class="solid-bottom" :adjust-position="false" :focus="false" maxlength="300" cursor-spacing="10"
			 @focus="InputFocus" @blur="InputBlur" v-model="my_say_text"></input>
			<view class="action">
				<text class="cuIcon-emoji text-grey" @click="showEmoji()"></text>
				<text class="cuIcon-pic text-grey" @click="to_send_pic()"></text>
			</view>
			<button class="cu-btn bg-green shadow" @click="to_send()">发送</button>
		</view>

		<!-- 显示表情勒边 -->
		<view class="action-bottom" v-if="emoji.show" >
			<image class="emoji-item " v-for="(emojiItem, emojiKey, index) in emoji.map" :key="index" :src="emoji.url + emojiItem" @click="selectEmoji(emojiKey)"></image>
		</view>
		
		<view class="cu-modal" :class="modal ?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">交换手机</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					确认交换手机号吗？
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="configModal">确定</button>
		
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {mapActions,mapState} from 'vuex';
	import UserService from '@/service/user.js';
	import EmojiDecoder from "@/components/EmojiDecoder.js";
	const ddd= 'https://imgcache.qq.com/open/qcloud/tim/assets/emoji/emoji_3@2x.png'
	export default {
		data() {
			// 定义表情
			let emojiUrl = 'https://imgcache.qq.com/open/qcloud/tim/assets/emoji/';
			let emojiMap = {
				'[NO]': 'emoji_0@2x.png',
				  '[OK]': 'emoji_1@2x.png',
				  '[下雨]': 'emoji_2@2x.png',
				  '[么么哒]': 'emoji_3@2x.png',
				  '[乒乓]': 'emoji_4@2x.png',
				  '[便便]': 'emoji_5@2x.png',
				  '[信封]': 'emoji_6@2x.png',
				  '[偷笑]': 'emoji_7@2x.png',
				  '[傲慢]': 'emoji_8@2x.png',
				  '[再见]': 'emoji_9@2x.png',
				  '[冷汗]': 'emoji_10@2x.png',
				  '[凋谢]': 'emoji_11@2x.png',
				  '[刀]': 'emoji_12@2x.png',
				  '[删除]': 'emoji_13@2x.png',
				  '[勾引]': 'emoji_14@2x.png',
				  '[发呆]': 'emoji_15@2x.png',
				  '[发抖]': 'emoji_16@2x.png',
				  '[可怜]': 'emoji_17@2x.png',
				  '[可爱]': 'emoji_18@2x.png',
				  '[右哼哼]': 'emoji_19@2x.png',
				  '[右太极]': 'emoji_20@2x.png',
				  '[右车头]': 'emoji_21@2x.png',
				  '[吐]': 'emoji_22@2x.png',
				  '[吓]': 'emoji_23@2x.png',
				  '[咒骂]': 'emoji_24@2x.png',
				  '[咖啡]': 'emoji_25@2x.png',
				  '[啤酒]': 'emoji_26@2x.png',
				  '[嘘]': 'emoji_27@2x.png',
				  '[回头]': 'emoji_28@2x.png',
				  '[困]': 'emoji_29@2x.png',
				  '[坏笑]': 'emoji_30@2x.png',
				  '[多云]': 'emoji_31@2x.png',
				  '[大兵]': 'emoji_32@2x.png',
				  '[大哭]': 'emoji_33@2x.png',
				  '[太阳]': 'emoji_34@2x.png',
				  '[奋斗]': 'emoji_35@2x.png',
				  '[奶瓶]': 'emoji_36@2x.png',
				  '[委屈]': 'emoji_37@2x.png',
				  '[害羞]': 'emoji_38@2x.png',
				  '[尴尬]': 'emoji_39@2x.png',
				  '[左哼哼]': 'emoji_40@2x.png',
				  '[左太极]': 'emoji_41@2x.png',
				  '[左车头]': 'emoji_42@2x.png',
				  '[差劲]': 'emoji_43@2x.png',
				  '[弱]': 'emoji_44@2x.png',
				  '[强]': 'emoji_45@2x.png',
				  '[彩带]': 'emoji_46@2x.png',
				  '[彩球]': 'emoji_47@2x.png',
				  '[得意]': 'emoji_48@2x.png',
				  '[微笑]': 'emoji_49@2x.png',
				  '[心碎了]': 'emoji_50@2x.png',
				  '[快哭了]': 'emoji_51@2x.png',
				  '[怄火]': 'emoji_52@2x.png',
				  '[怒]': 'emoji_53@2x.png',
				  '[惊恐]': 'emoji_54@2x.png',
				  '[惊讶]': 'emoji_55@2x.png',
				  '[憨笑]': 'emoji_56@2x.png',
				  '[手枪]': 'emoji_57@2x.png',
				  '[打哈欠]': 'emoji_58@2x.png',
				  '[抓狂]': 'emoji_59@2x.png',
				  '[折磨]': 'emoji_60@2x.png',
				  '[抠鼻]': 'emoji_61@2x.png',
				  '[抱抱]': 'emoji_62@2x.png',
				  '[抱拳]': 'emoji_63@2x.png',
				  '[拳头]': 'emoji_64@2x.png',
				  '[挥手]': 'emoji_65@2x.png',
				  '[握手]': 'emoji_66@2x.png',
				  '[撇嘴]': 'emoji_67@2x.png',
				  '[擦汗]': 'emoji_68@2x.png',
				  '[敲打]': 'emoji_69@2x.png',
				  '[晕]': 'emoji_70@2x.png',
				  '[月亮]': 'emoji_71@2x.png',
				  '[棒棒糖]': 'emoji_72@2x.png',
				  '[汽车]': 'emoji_73@2x.png',
				  '[沙发]': 'emoji_74@2x.png',
				  '[流汗]': 'emoji_75@2x.png',
				  '[流泪]': 'emoji_76@2x.png',
				  '[激动]': 'emoji_77@2x.png',
				  '[灯泡]': 'emoji_78@2x.png',
				  '[炸弹]': 'emoji_79@2x.png',
				  '[熊猫]': 'emoji_80@2x.png',
				  '[爆筋]': 'emoji_81@2x.png',
				  '[爱你]': 'emoji_82@2x.png',
				  '[爱心]': 'emoji_83@2x.png',
				  '[爱情]': 'emoji_84@2x.png',
				  '[猪头]': 'emoji_85@2x.png',
				  '[猫咪]': 'emoji_86@2x.png',
				  '[献吻]': 'emoji_87@2x.png',
				  '[玫瑰]': 'emoji_88@2x.png',
				  '[瓢虫]': 'emoji_89@2x.png',
				  '[疑问]': 'emoji_90@2x.png',
				  '[白眼]': 'emoji_91@2x.png',
				  '[皮球]': 'emoji_92@2x.png',
				  '[睡觉]': 'emoji_93@2x.png',
				  '[磕头]': 'emoji_94@2x.png',
				  '[示爱]': 'emoji_95@2x.png',
				  '[礼品袋]': 'emoji_96@2x.png',
				  '[礼物]': 'emoji_97@2x.png',
				  '[篮球]': 'emoji_98@2x.png',
				  '[米饭]': 'emoji_99@2x.png',
				  '[糗大了]': 'emoji_100@2x.png',
				  '[红双喜]': 'emoji_101@2x.png',
				  '[红灯笼]': 'emoji_102@2x.png',
				  '[纸巾]': 'emoji_103@2x.png',
				  '[胜利]': 'emoji_104@2x.png',
				  '[色]': 'emoji_105@2x.png',
				  '[药]': 'emoji_106@2x.png',
				  '[菜刀]': 'emoji_107@2x.png',
				  '[蛋糕]': 'emoji_108@2x.png',
				  '[蜡烛]': 'emoji_109@2x.png',
				  '[街舞]': 'emoji_110@2x.png',
				  '[衰]': 'emoji_111@2x.png',
				  '[西瓜]': 'emoji_112@2x.png',
				  '[调皮]': 'emoji_113@2x.png',
				  '[象棋]': 'emoji_114@2x.png',
				  '[跳绳]': 'emoji_115@2x.png',
				  '[跳跳]': 'emoji_116@2x.png',
				  '[车厢]': 'emoji_117@2x.png',
				  '[转圈]': 'emoji_118@2x.png',
				  '[鄙视]': 'emoji_119@2x.png',
				  '[酷]': 'emoji_120@2x.png',
				  '[钞票]': 'emoji_121@2x.png',
				  '[钻戒]': 'emoji_122@2x.png',
				  '[闪电]': 'emoji_123@2x.png',
				  '[闭嘴]': 'emoji_124@2x.png',
				  '[闹钟]': 'emoji_125@2x.png',
				  '[阴险]': 'emoji_126@2x.png',
				  '[难过]': 'emoji_127@2x.png',
				  '[雨伞]': 'emoji_128@2x.png',
				  '[青蛙]': 'emoji_129@2x.png',
				  '[面条]': 'emoji_130@2x.png',
				  '[鞭炮]': 'emoji_131@2x.png',
				  '[风车]': 'emoji_132@2x.png',
				  '[飞吻]': 'emoji_133@2x.png',
				  '[飞机]': 'emoji_134@2x.png',
				  '[饥饿]': 'emoji_135@2x.png',
				  '[香蕉]': 'emoji_136@2x.png',
				  '[骷髅]': 'emoji_137@2x.png',
				  '[麦克风]': 'emoji_138@2x.png',
				  '[麻将]': 'emoji_139@2x.png',
				  '[鼓掌]': 'emoji_140@2x.png',
				  '[龇牙]': 'emoji_141@2x.png'

				
			};
			return {
				InputBottom: 0,
				chater_info:{},
				title:"聊天",
				chatList:[],
				username:"",
				userinfo:{},
				my_say_text:'',
				morelist:[
					{
						text: '举报',
						value: 0
					},
					{
						text: '拉黑',
						value: 1
					},
				],
				show:false,
				showGuanzhu: false,
				emoji : {
					url : emojiUrl,
					map : emojiMap,
					show : false,
					decoder : new EmojiDecoder(emojiUrl,emojiMap)
				},
				modal:false
			};
		},
		computed: {
			...mapState({
				//这里可以通过这种方式引用相应模块的state数据，其中user是模块名。在代码的其他部分可以使用this.userInfo访问数据
				user: ({user}) => user.userInfo,
			}),
		},
		onUnload(){
		    uni.$off('msg_ol')  //在此生命周期里销毁msg_ol事件的监听
		},
		onLoad(){
			let _this = this
			var chater_info = uni.getStorageSync('jiguang_chater_info')
			this.chater_info = chater_info
			this.title = chater_info.nickName
			this.username = uni.getStorageSync('jim_login_username')
			this.$jjim.config(this.user.id,'123456');
			
			this.$jjim.login()
			this.$jjim.getUserInfo(this.username).then(function(data){
				_this.userinfo = data.user_info
				
				_this.getMsgs()
			})
			uni.$on('msg_ol', function(data) {
				console.log('收到消息，收到消息，收到消息')
				
				for(var i = 0;i<data.length;i++)
				{
					if(data[i].content.from_id == _this.chater_info.username){
						_this.insertData(data[i])	
					}
				}
				_this.loadReources()
				_this.to_bottom()
			})
			this.getUserIsFollow()
		},
		methods: {
			...mapActions(['sendMsgUpdateConversationAction']),
			// 判断是是系统消息、我的消息、对方消息显示位置
			showMsgType(msg) {
				if(msg.extras && msg.extras.type === "system_msg") {
					return true
				} 
				return false
			},
			// 获取该用户是否是关注的
			async getUserIsFollow() {
				const params ={
					uid: this.user.id,
					u: this.user.phone, 
					fuid : this.chater_info.username.replace('jiguang_', '')
				}
				const isFollow = await UserService.getUserFollow(params)	
				this.showGuanzhu = isFollow === 1 ? false : true
			},
			insertData(item){				
				let _this = this
				item.from_id = item.content.from_id
				item.msg_type =  item.content.msg_type
				item.text = item.content.msg_body.text
				item.extras = item.content.msg_body.extras
				if(item.content.from_id == _this.username){
					item.avatar = _this.userinfo.avatar
				}else{
					item.avatar = _this.chater_info['avatar']
				}
				_this.chatList.push(item)
			},
			getMsgs(){
				let _this = this
				let msgs = this.$jjim.getMsgs(this.chater_info.username)
				msgs = msgs.sort(_this.timeAsc)
				for(var i = 0;i<msgs.length;i++)
				{
					msgs[i].from_id = msgs[i].content.from_id
					msgs[i].msg_type =  msgs[i].content.msg_type
					msgs[i].text = msgs[i].content.msg_body.text
					msgs[i].extras =  msgs[i].content.msg_body.extras
					
					if(msgs[i].content.from_id == this.username){
						msgs[i].avatar = this.userinfo.avatar
					}else{
						msgs[i].avatar = this.chater_info['avatar']
					}
				}
				_this.chatList = msgs
				_this.chatList.sort(_this.timeAsc)
				_this.loadReources()
				_this.to_bottom()
			},
			loadReources(){
				let _this = this
				for(var i=0;i<_this.chatList.length;i++){
					if(_this.chatList[i].content.msg_type == 'image' && !_this.chatList[i].image){
						let _c = _this.chatList[i]
						// console.log('start:' + i + '-' + _this.chatList.length)
						_this.$jjim.getResurce(_this.chatList[i].content.msg_body.media_id, i).then(function(data){
							_c.image = data.url
							_this.chatList[data.index] = _c
							_this.chatList.sort(_this.timeAsc)
						},function(data){
							console.log('图片加载失败：'+JSON.stringify(data))
						})
					}
				}
			},
			loadMsgs(msgs){
				let _this = this
				if(msgs){
					msgs = msgs.sort(_this.timeAsc)
					for(var i = 0;i<msgs.length;i++)
					{
						msgs[i].from_id = msgs[i].content.from_id
						msgs[i].msg_type =  msgs[i].content.msg_type
						msgs[i].text = msgs[i].content.msg_body.text
						if(msgs[i].content.from_id == this.username){
							msgs[i].avatar = this.userinfo.avatar
						}else{
							msgs[i].avatar = this.chater_info['avatar']
						}
						if(msgs[i].content.msg_type == 'image'){
							let _c = msgs[i]
							_this.$jjim.getResurce(msgs[i].content.msg_body.media_id).then(function(data){
								_c.image = data
								_this.chatList[i] = _c
								_this.chatList.sort(_this.timeAsc)
							},function(data){
								console.log('图片加载失败：'+JSON.stringify(data))
							})
						}
					}
					console.log(msgs)
					this.chatList = msgs
					_this.to_bottom()
				}else{
					//获取历史消息
					this.loadHistory()
				}
			},
			loadHistory(){
				let _this = this
				_this.$jjim.getHistory().then(function(data){
					for(var i=0;i<data.data.messages.length;i++){
						data.data.messages[i].text = data.data.messages[i].msg_body.text
						if(data.data.messages[i].from_id == _this.username){
							data.data.messages[i].avatar = _this.userinfo.avatar
						}else{
							data.data.messages[i].avatar = _this.chater_info['avatar']
						}
						
						if(data.data.messages[i].msg_type == 'image'){
							let _c = data.data.messages[i]
							_this.$jjim.getResurce(data.data.messages[i].msg_body.media_id).then(function(data){
								_c.image = data
								_this.chatList[i] = _c
								_this.chatList.sort(_this.timeAsc)
							},function(data){
								console.log('图片加载失败：'+JSON.stringify(data))
							})
						}
					}
					_this.chatList = data.data.messages 
					_this.to_bottom()
					
				},function(data){
					console.log(data)
					_this.loadHistory()
				});
			},
			openimage(msg_id){
				let _this = this;
				let urls = [];
				let current = 0;
				for(var i=0;i<_this.chatList.length;i++){
					if(_this.chatList[i].msg_type == 'image'){
						if(msg_id == _this.chatList[i].msg_id){
							current = urls.length
						}
						urls.push(_this.chatList[i].image)
					}
				}
				// console.log(urls)
				uni.previewImage({
					urls: urls,
					current: current
				});
			},
			to_bottom() {			
				setTimeout(function() {
					uni.pageScrollTo({
						scrollTop: 100000,
						duration:0
					})
				}, 500);
			},
			to_send() {
				var _this = this;
				if (!_this.my_say_text || _this.my_say_text == '') {
					//无内容直接跳出
					return
				}
				this.$jjim.sendMsg(_this.chater_info.username,_this.chater_info.nickName,_this.my_say_text).then(function(data){
					console.log(data,'发生文字')
					_this.insertData(data)
					_this.to_bottom()
					_this.my_say_text = '';
					_this.sendMsgUpdateConversationAction(data)
				},function(error){
					console.log(error)
					_this.my_say_text = ''
				})
			},
			
			to_send_pic(){
				let _this = this
				
				uni.chooseImage({
					count:1,
					// sizeType:  original 原图，compressed 压缩图，默认二者都有
					sizeType: ['original', 'compressed'],
					success(res){
						uni.showLoading({
							title:'上传中...'
						})
						let img = res.tempFilePaths[0]
						
						_this.$jjim.sendPic(_this.chater_info.username,_this.chater_info.nickName, img).then(function(data){
							console.log(data, '发送图片')
							_this.insertData(data)
							_this.loadReources()
							_this.to_bottom()
							uni.hideLoading()
							_this.sendMsgUpdateConversationAction(data)
							
						},function(error){
							console.log(error)
							uni.hideLoading()
						})
					} 
				})
			},
			timeAsc(obj1,obj2){
				if(obj1.ctime_ms < obj2.ctime_ms){
				   return -1;
				}else if(obj1.ctime_ms > obj2.ctime_ms){
				   return 1;
				}else{
				   return 0;
				}
			},
			InputFocus(e) {
				this.InputBottom = e.detail.height
				this.emoji.show = false;
			},
			InputBlur(e) {
				this.InputBottom = 0
			},
			// 更多
			showMore() {
				this.show = !this.show
			},
			goJuBao() {
				this.show = false
				const userId = this.chater_info.username.replace('jiguang_', '')
				uni.navigateTo({
					animationDuration:200,
					url:'../report/report?fuid='+userId
				})
			},
			// 拉黑
			addBlackUser() {
				this.show = false
				this.$jjim.addSingleBlacks(this.chater_info.username).then(data => {
					if(data.code === 0 ) {
						this.$api.msg('拉黑成功')
					}
				})
			},
		
			//防骗指南 
			goNavto(){
				uni.navigateTo({
					animationDuration:200,
					url:'../setting/htmlrender?sysaction=防骗指南'
				})
			},
			
			closeFllow() {
				this.showGuanzhu = false
			},
			async FllowUser() {
				const userId = this.chater_info.username.replace('jiguang_', '')
				const res = await UserService.userFollow({
					fuid: userId,
					uid: this.user.id
				})
				this.$api.msg('关注成功')
				this.closeFllow()
			},
			showEmoji() {
				this.emoji.show = !this.emoji.show;
				if(this.emoji.show) {
					this.InputBottom = 200
				} else {
					this.InputBottom = 0
				}
				
			},
			selectEmoji (emojiKey) {
				this.my_say_text +=emojiKey
			},
			// 渲染显示文本信息 包含信息
			renderTextMessage(message) {
				return '<text class="htmlemoji">' + this.emoji.decoder.decode(message.text) +'</text>'
			},
			// 点击头像
			clickUser(userId) {
				const id = userId.replace('jiguang_', '')
				uni.navigateTo({
					animationDuration:200,
					url: `../desc/desc?id=${id}`,
				})
			},
			// 交换手机号码
			async sendPhone() {
				this.modal = true
			},
			
			// 确认贾环手机号码
			async configModal() {
				let _this = this;
				const userId = this.chater_info.username.replace('jiguang_', '')
				const params = {
					fuid: userId,
					uid: this.user.id,
					u:  this.user.phone,
				}
				const isIntercorrelation = await UserService.getIsTwoFollowApi(params)
				if(isIntercorrelation === 1) {
					// 相互关注
					const my_say_text =`${this.user.username}请求交换手机号，对方手机号：123****8910`
					this.$jjim.sendMsg(this.chater_info.username,this.chater_info.nickName,my_say_text, {type:'system_msg'}).then(function(data){
						console.log(data,'系统消息')
						_this.insertData(data)
						_this.to_bottom()
						_this.sendMsgUpdateConversationAction(data)
						_this.hideModal()
					},function(error){
						console.log(error)
						_this.hideModal()
					})
				} else {
					const my_say_text = '双方没有互相关注不能交换手机号码'
					this.$jjim.sendMsg(this.chater_info.username,this.chater_info.nickName,my_say_text, {type:'system_msg'}).then(function(data){
						console.log(data,'系统消息')
						_this.insertData(data)
						_this.to_bottom()
						_this.sendMsgUpdateConversationAction(data)
						_this.hideModal()
					},function(error){
						console.log(error)
						_this.hideModal()
					})
				}
			},
			hideModal() {
				this.modal = false
			}
		}
	}
</script>

<style scoped lang="scss">
	page{
	  padding-bottom: 100upx;
	}
	.bg-pink{
		background-color: #FACBFF;
		color: #333333;
	}
	.cu-avatar{
		background-size: 100% 100% !important;
		background-color:#EEE !important;
	}
	.dropdown{
		min-width: 100px;
		background-color: #FFFFFF;
		position: absolute;
		right: 0;
		padding: 0 12px;
		text-align: center;
		&::after{
			position: absolute;
			content: '';
			border-right: 10px solid transparent;
			border-left: 10px solid transparent;
			border-bottom: 10px solid #FFFFFF;
			top: -10px;
			right: 16px;
			
		}
	}
	.border-radius-custom{
		border-radius: 5px;
	}
	.margin-sm-t{
		margin-top: 8px;
	}
	.guanzhu{
		display: flex;
		position: fixed;
		width: calc(100% - 32px);
		z-index: 999;
		justify-content: space-between;
		align-items: center;
	}
	.main-chat{
		margin-bottom: 60px;
		margin-top: 26px;
	}

	.tips{
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #E6E2E2;
		position: fixed;
		z-index: 999;
		width: 100%;
		padding: 5px 0;
		text {
			font-size: 10px;
			font-family: PingFang SC;
			:nth(1) {
				font-weight: 500;
				line-height: 16px;
				color: #999999;
			}
			:nth(2) {
				font-weight: bold;
				line-height: 16px;
				font-size: 14px;
				color: #666666;
			}
		}
	}
	.bg-btn-pick{
		background: linear-gradient(270deg, #C529DA 0%, #FA81CE 100%);
	}
	.color-100{
		color: #FFFFFF;
	}
	
	.action-bottom{
		height: 200px;
		width:100%;
		box-sizing: border-box;
		display: flex;
		position: fixed;
		bottom: 0;
		z-index: 999;
		background: #FFFFFF;
		overflow: auto;
		padding-bottom: 20px;
		flex-wrap: wrap;
		justify-content: center;
	}
	.emoji-item{
		height: 24px;
		width: 24px;
		margin: 12px;
	}
	.phone-wrap{
		width: 60px;
		height: 20px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #E6E6E6;
		border-radius: 10px;
		margin-left: 13px;
		position: fixed;
	}
	.phone-size{
		font-size: 10px;
		font-family: PingFang SC;
		font-weight: 500;
	}
	.phone {
		width: 12px;
		height: 12px;
	}
	.system-wrap {
		width: 100%;
		display: flex;
	}
</style>
